<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选择文件</title>
    <link rel="stylesheet" th:href="@{/frame/layui/css/layui.css}">
</head>
<body>
<input type="hidden" id="groupid" name="groupid" value="-1">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">文档信息</div>
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">文档标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" class="layui-input" id="docTitle">
                    </div>
                </div>
                <div class="layui-form-item" id="selectgroup">
                    <label class="layui-form-label">请选择分类</label>
                    <!-- ajax填充-->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文档简介</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="建议将能标识文档的关键词写进来，文档被搜索到的可能性更大哦！"
                                  class="layui-textarea" id="description"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">售价</label>
                    <div class="layui-input-inline">
                        <select name="neededintegral" lay-verify="required" id="neededintegral">
                            <option value="0">免积分</option>
                            <option value="1">1积分</option>
                            <option value="2">2积分</option>
                            <option value="5">5积分</option>
                            <option value="8">8积分</option>
                            <option value="10">10积分</option>
                            <option value="20">20积分</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" style="width: 90%;padding-left: 5%;">
                    <div class="layui-upload-drag layui-btn-fluid" align="center" id="selectfile">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" id="collectandupload">上传文档</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script>
    layui.use(['upload', 'form', 'layer'], function () {
        const upload = layui.upload;
        const layer = layui.layer;
        const $ = layui.$;
        const form = layui.form;
        upload.render({
            elem: '#selectfile'
            , auto: false
            , bindAction: '#collectandupload'
            , accept: 'file'
            , exts: 'doc|docx|csv|pdf|ppt|pptx|xls|xlsx|txt'
            , data: {
                'docGroup.groupid': function () {
                    return $('#groupid').val();
                },
                title: function () {
                    return $('#docTitle').val();
                },
                description: function () {
                    return $('#description').val();
                },
                neededintegral: function () {
                    return $('#neededintegral').val();
                }
            }
            , url: '[[@{/document/uploadDoc}]]'
            , done: function (res, index, upload) {
                parent.layer.msg('文档上传成功，等待管理员审核。', {icon: 1, time: 2000});
                const layer_index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(layer_index);
            }
        });

        function appendFirstGroup() {
            $.ajax({
                type: 'post',
                url: '[[@{/group/getFirstStepGroup}]]',
                async: false,
                dataType: 'json',
                error: function () {
                    layer.msg('Ajax请求失败！', {
                        icon: 2
                        , time: 2000
                    })
                },
                success: function (res) {
                    if (res.count > 0) {
                        let appendedhtml = '<div class="layui-input-inline">';
                        appendedhtml += '<select name="selectedroupid" lay-filter="selectGroup">';
                        appendedhtml += '<option value="-1">请选择分类</option>';
                        for (let i = 0; i < res.count; i++) {
                            const item = res.data[i];
                            appendedhtml += '<option value="' + item.groupid + '">' + item.groupname + '</option>';
                        }
                        appendedhtml += '</select>';
                        appendedhtml += '</div>';
                        $('#selectgroup').append(appendedhtml);
                        form.render('select');
                    }
                }
            });
        }

        form.on('select(selectGroup)', function (ooo) {
            const formitem = $(ooo.elem).parent().parent();

            $(ooo.elem).parent().nextAll().remove();
            if (ooo.value !== '-1') {
                $('#groupid').val(ooo.value);
                $.ajax({
                    type: 'post',
                    url: '[[@{/group/getGroupChildren}]]',
                    async: false,
                    data: {
                        groupid: ooo.value
                    },
                    dataType: 'json',
                    error: function () {
                        layer.msg('Ajax请求失败！', {
                            icon: 2
                            , time: 2000
                        })
                    },
                    success: function (res) {
                        if (res.count > 0) {
                            let appendedhtml = '<div class="layui-input-inline">';
                            appendedhtml += '<select name="selectedroupid" lay-filter="selectGroup">';
                            appendedhtml += '<option value="-1">请选择分类</option>';
                            for (let i = 0; i < res.count; i++) {
                                const item = res.data[i];
                                appendedhtml += '<option value="' + item.groupid + '">';
                                appendedhtml += item.groupname + '</option>';
                            }
                            appendedhtml += '</select>';
                            appendedhtml += '</div>';
                            formitem.append(appendedhtml);
                        }
                    }
                });
            } else {
                //选择了第一个select的“请选择分类”
                if (!$(ooo.elem).parent().prev().children().eq(0).html()) {
                    $('#groupid').val(-1);
                } else {
                    //将前一个select的值赋给隐藏input
                    $('#groupid').val($(ooo.elem).parent().prev().children().eq(0).val());
                }
            }

            //重新渲染
            form.render('select');
        });

        $(function () {
            appendFirstGroup();
        });
    });
</script>
</body>
</html>